{% extends "base.html" %}
{% load i18n %}

{% block pageContent %}
{% ifequal channel 'playlist' %}
		<fieldset>
			<h2>{% trans "Share this playlist:" %}</h2>
			<p>
				<input type="input" size="50" name="playlistURL" id="playlistURL" 
				{% if playlistKey %}
					value="http://{{ siteHostname }}/playlist/{{ playlistKey }}"
				{% else %}
					value="http://{{ siteHostname }}/channel/playlist/{{ videoIDs }}"
				{% endif %}
					onclick="javascript:$('#playlistURL').select();"/>
			</p>
			<h3>
				<a href="/widget/playlist/add/{{ playlistKey }}">{% trans "Embed this playlist" %}</a> <span class="red">(NEW!)</span>
			</h3>
			<h3><a href="/playlist/create">{% trans "Create your own playlist using LoopTube now!" %}</a></h3>
		</fieldset>
{% endifequal %}
{% ifequal channel 'highlight' %}
		<fieldset id="buildPlaylist">
			<h2>{% trans "Create playlist" %}:</h2>
			<p>
				{% trans "Title" %}: 
				<input type="input" size="50" name="playlistTitle" id="playlistTitle" maxlength="100"/>
				<button onclick="javascript:buildPlaylist();">{% trans "Create playlist" %}</button>
			</p>
			<p>
				{% if user %}
					<input type="hidden" id="storePlaylist" name="storePlaylist" value="1"/>
					{% trans "The playlist will be saved in" %} <a href="/playlist/myplaylist">{% trans "My Playlists" %}</a>
				{% else %}
					<input type="checkbox" id="storePlaylist" name="storePlaylist"/>
					<label for="storePlaylist">{% trans "Save in My Playlists (login using Google account required)" %}</label>
				{% endif %}
			</p>
			
		</fieldset>
{% endifequal %}

{% if playlistEditable %}
		<fieldset id="editBox" style="display: none;">
			<div align="center">
				<img src="/static/images/ajax-loader-big.gif"/>
			</div>
		</fieldset>
		<p id="editLink">
			[ <a href="javascript:;" onclick="javascript:editPlaylist();">
			{% ifequal playlistKey "highlight" %}
				{% trans "Edit highlight video list" %}
			{% else %}
				{% trans "Edit playlist" %}
			{% endifequal %}
			</a> ]
		</p>
{% endif %}

		<div id="movieDiv" align="center">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
		<h2 id="nowPlaying">{% trans "Please wait ..." %}</h2>
		<p>
			<button onclick="javascript:startRandom();">{% trans "Play another video!" %}</button>
			<button onclick="javascript:loopThisVideo();">{% trans "Loop this video" %}</button><br/>
			({% trans "Another video will be automatically played when buffering more than 20 seconds." %})
		</p>

		{% if not isPlaylist %}
				<div id="similarSongsBlock" style="display: none;">
					<h2>{% trans "Similar Songs" %}</h2>
					<div id="similarSongs">
						<div align="center">
							<img src="/static/images/ajax-loader-big.gif"/>
						</div>
					</div>
				</div>		
		{% endif %}

		{% if isPlaylist %}
			{% ifequal channel 'playlist' %}
				<h2>{% trans "Playlist videos" %}:</h2>
			{% else %}
				<h2>{% trans "My highlight videos" %}:</h2>
			{% endifequal %}
		{% else %}
			<h2>{% trans "Recently Played Videos" %}:</h2>
		{% endif %}
		<ul id="recentlyPlayed">
			{% for videoInfo in videoList %}
				<li id="playlist-{{ videoInfo.videoID }}">
					<span class="highlightLink" id="highlight-{{ videoInfo.videoID }}"><img src="/static/images/ajax-loader.gif" width="12" height="12"/></span>
					<a href="javascript:loadMovieDataByVideoID('{{ videoInfo.videoID }}');"><span class="title">{{ videoInfo.title }}</span></a>
				</li>
			{% endfor %}
		</ul>

{% if isPlaylist %}
		<p>{% trans "From" %}: 
		{% if playlist.user %}
			{{ playlist.user }}
		{% else %}
			{% trans "Guest" %}
		{% endif %}
		</p>
		<h3>
			<a href="/widget/playlist/add/{{ playlistKey }}">{% trans "Embed this playlist" %}</a> <span class="red">(NEW!)</span>
		</h3>
{% endif %}

{% include "playlist-script.html" %}

{% endblock pageContent %}
